<template>
	<view class="coupons">
		<view class="tabbarOrder pf">
			<tabbar :showLabel="false" :active="active" :tab="tab" @change_status="change_status"></tabbar>
		</view>
		<view class="coupons_box" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)">
			<refresh :freshFlag="freshFlag" :loadMsg="loadMsg"></refresh>
			<coupons :coupons="fun(coupons,active)" v-if="active == 0"></coupons>
			<coupons :coupons="fun(coupons,active)" v-if="active == 1"></coupons>
			<coupons :coupons="fun(coupons,active)" v-if="active == 2"></coupons>
			<coupons :coupons="fun(coupons,active)" v-if="active == 3"></coupons>
		</view>
		<view class="getMore" style="padding-bottom: 50rpx;" v-if="fun(coupons,active).length">
			<touch-bottom :isNone="isNone" :isLoad="isLoad" :isName="isName"></touch-bottom>
		</view>
		<empty :null_data="null_data" v-if="fun(coupons,active).length==0"></empty>
		<!-- 返回顶部 -->
		<backtop :show_top="show_top"></backtop>
	</view>
</template>
<script>
	import mixins from '@/common/mixins.js';
	import { mapState } from 'vuex';
	import coupons from "../components/coupons/coupons.vue"
	export default {
		components: { coupons },
	    mixins:[mixins],
		data() {
			return {
				//空状态
				null_data: {
				 null_img: this.imgUrl + 'nocouponss.png',
				 text: '暂无卡券~'
				},
				isName: false,
				isLoad: false,
				isNone: false,
				active: 0,
				tab: [{         // tab栏
						id: 0,
						label: "全部",
					},
					{
						id: 1,
						label: "待使用",
					}, {
						id: 2,
						label: "已使用",
					},
					{
						id: 3,
						label: "已过期",
					}
				],
				coupunsObj: {
					page: 1,
					pagesize: 10,
					member_id: 1,
					status: ''
				},
				couponsList: [],  // 卡卷列表
				// 下拉刷新
				startY: 0, // 保存 y轴点的位置
				loadShowHeight: 0,
				scrollTop: 0,
				loadMinHeight: 0,
				loadMsg: '',
				freshFlag: false,
				hight: 0,
				show_top: false, // 回到顶部按钮显示
			};
		},
		computed: {
				// 获取vuex 数据
				...mapState({
					coupons: state => state.user.coupons,  // 获取卡卷
				}),
		},
		watch: {
			// 监听滚动高度
			hight(newVal, oldVal) {
				if (newVal > 100) {
					this.show_top = true;
				} else {
					this.show_top = false;
				}
			}
		},
		mounted() {
			// 获取卡卷
			this.getGoods()
		},
		// 下拉刷新
		onReachBottom() {
			this.getMore();
		},
		methods: {
			// 当页面滚动时触发;
			onPageScroll(res) {
			    // 获取当前页面滚动高度；
				this.hight = res.scrollTop;
			},
			touchStart(e) {
				this.startY = e.touches[0].pageY;
			},
			touchMove(e) {
				if (this.scrollTop == 0) {
					let moveDistance = e.touches[0].pageY - this.startY;
					if (moveDistance > 0 && moveDistance <= (this.loadMaxHeight || 30)) {
						this.loadShowHeight = moveDistance;
					};
				};
			},
			touchEnd(e) {
				if (this.loadShowHeight >= (this.loadMinHeight || 20)) {
					this.refresh();
				} else {
					this.loadShowHeight = 0;
				}
			},
			refresh() {
				this.freshFlag = true;
				this.loadMsg = '刷新中...';
				setTimeout(() => {
					this.getMore();
					this.loadMsg = '刷新完成';
					this.loadShowHeight = 0;
					setTimeout(()=> {
						this.freshFlag = false;
					},500)
				}, 1500);
			},
			// 加载更多
			getMore() {
				if(this.isName) return;
				this.isNone =true;
				this.isLoad = true;
				setTimeout(()=> {
					this.coupunsObj.page++
					this.$api('membercoupon',this.coupunsObj).then( res => {
						res.data.data.forEach((item, index) => {
							item.use_end_time = this.time_data(item.use_end_time, 'f_date');
							item.receive_time = this.time_data(item.receive_time, 'f_date');
							item.use_start_time = this.time_data(item.use_start_time, 'f_date');
						})
						let arr = [...this.couponsList,...res.data.data]
						this.$store.dispatch('user/get_membercoupon',arr)
						if(!res.data.data.length) {
							this.isLoad = false;
							this.isName =true
						} else {
							this.isLoad = false;
							this.isNone = false;
						}
					})
				},1000)
			},
			getGoods() {
				this.$api('membercoupon',this.coupunsObj).then(res => {					
					let arr = res
					arr.data.data.forEach((item, index) => {
						item.use_end_time = this.time_data(item.use_end_time, 'f_date');
						item.receive_time = this.time_data(item.receive_time, 'f_date');
						item.use_start_time = this.time_data(item.use_start_time, 'f_date');
					})
					this.couponsList = arr.data.data
					this.$store.dispatch('user/get_membercoupon',arr.data.data)
				})
			},
			// 获取第一个分类的名称，以及下标
			change_status(index) {
				this.active = index
			},
			// 分类切换
			fun (express,active){
			    var arr = []
			    express.forEach((item,index) => {
					if (active ==0 ) {
					      arr.push(item)
					}
			        if(item.status == 1 && active == 1){
			            arr.push(item)
			        }
			        else if(item.status == 2 && active == 2){
			            arr.push(item)
			        }
			        else if(item.status == 3 && active == 3){
			            arr.push(item)
			        }
			    });
			    return arr 
			}
		},

	}
</script>
<style scoped lang="scss">
@import  './index.scss';
</style>
